<%--
  Created by IntelliJ IDEA.
  User: HKemmm
  Date: 2022/3/10
  Time: 17:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head lang="en">
    <meta charset="utf-8"/>
    <title>个人信息</title>
    <link rel="stylesheet" type="text/css" href="/static/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/mygrxx.css"/>

    <link rel="stylesheet" type="text/css" href="/static/css/upload.css">
</head>
<body>
<!------------------------------head------------------------------>
<div class="head ding">
    <div class="wrapper clearfix">
        <div class="clearfix" id="top">
            <h1 class="fl"><a href="/page/index.jsp"><img src="/static/moban/img/logo/logo.png"/></a></h1>
            <div class="fr clearfix" id="top1">
                <p class="fl">
                    <a href="#" id="login">登录</a>
                    <a href="#" id="reg">注册</a>
                </p>
                <form action="#" method="get" class="fl">
                    <input type="text" placeholder="搜索"/>
                    <input type="hidden" id="userId" value="${sessionScope.User.id}">
                    <input type="button"/>
                </form>
                <div class="btn fl clearfix">
                    <a href="mygxin.html"><img src="/static/img/grzx.png"/></a>
                    <a href="#" class="er1"><img src="/static/img/ewm.png"/></a>
                    <a href="cart.html"><img src="/static/img/gwc.png"/></a>
                    <p><a href="#"><img src="/static/img/smewm.png"/></a></p>
                </div>
            </div>
        </div>
    </div>
</div>
<!------------------------------idea------------------------------>
<div class="address mt">
    <div class="wrapper clearfix">
        <a href="index.html" class="fl">首页</a>
        <span>/</span>
        <a href="mygxin.html" class="on">个人信息</a>
    </div>
</div>

<!------------------------------Bott------------------------------>
<div class="Bott">
    <div class="wrapper clearfix">
        <div class="zuo fl">
            <h3>
                <a><img class="zuo-img" src="/myimg/${sessionScope.User.photo}"/></a>
                <p class="clearfix"><span class="fl">[${sessionScope.User.name}]</span><span class="fr">[退出登录]</span>
                </p>
            </h3>
            <div>
                <h4>我的交易</h4>
                <ul>
                    <li><a href="/shop/car?id=${sessionScope.User.id}">我的购物车</a></li>
                    <li><a href="/jump/mysorder">我的订单</a></li>
                    <li><a href="/jump/myprod">评价晒单</a></li>
                </ul>
                <h4>个人中心</h4>
                <ul>
                    <li><a href="/shop/centre">我的中心</a></li>
                    <li><a href="/address/addressInfo?uid=${sessionScope.User.id}">地址管理</a></li>
                </ul>
                <h4>账户管理</h4>
                <ul>
                    <li class="on"><a href="/jump/mygrxx">个人信息</a></li>
                    <li><a href="/jump/remina">修改密码</a></li>
                </ul>
            </div>
        </div>
        <div class="you fl">
            <h2>个人信息</h2>
            <div class="gxin">
                <div class="tx"><a><img class="zuo-img" src="/myimg/${sessionScope.User.photo}"/>
                    <p id="avatar" style="cursor: pointer">修改头像</p></a></div>
                <div class="xx">
                    <h3 class="clearfix"><strong class="fl">基础资料</strong><a href="#" class="fr" id="edit1">编辑</a></h3>
                    <div>姓名：${sessionScope.User.name}</div>
                    <div>电话：${sessionScope.User.phone}</div>
                    <div>邮箱：${sessionScope.User.email}</div>
                    <div>性别：<c:if test="${sessionScope.User.sex == 0}">男</c:if>
                        <c:if test="${sessionScope.User.sex == 1}">女</c:if></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--遮罩-->
<div class="mask"></div>
<!--编辑弹框-->
<div class="bj">
    <div class="clearfix"><a href="#" class="fr gb"><img src="/static/img/icon4.png"/></a></div>
    <h3>编辑基础资料</h3>
    <form>
        <p><label>姓名：</label><input id="name" type="text" placeholder="${sessionScope.User.name}"/></p>
        <p><label>电话：</label><input id="phone" type="text" placeholder="${sessionScope.User.phone}"/></p>
        <p>
            <label>性别：</label>
            <span><input class="sex" type="radio" name="sex" value="0"/>男</span>
            <span><input class="sex" type="radio" name="sex" value="1"/>女</span>
        </p>
        <p><label>邮箱：</label><input id="email" type="text" placeholder="${sessionScope.User.email}"/></p>
        <div class="bc">
            <input type="button" value="保存" onclick="updateInfo()"/>
            <input type="button" value="取消"/>
        </div>
    </form>
</div>

<!--修改头像-->
<div class="avatar">
    <div class="clearfix"><a href="#" class="fr gb"><img src="/static/img/icon4.png"/></a></div>
    <h3>修改头像</h3>
    <div class="drag-area">
        <div class="icon">
            <i class="fas fa-cloud-upload-alt"></i>
            <header>Drag to Upload File</header>
            <span>OR</span>
            <button>Browse File</button>

        </div>
    </div>
    <input class="file" name="file" type="file" hidden/>
    <input type="button" id="btn-submit" value="提交" style="width: 150px;height: 50px;">
</div>

<!--返回顶部-->
<div class="gotop">
    <a href="/shop/car?id=${sessionScope.User.id}">
        <dl>
            <dt><img src="/static/img/gt1.png"/></dt>
            <dd>去购<br/>物车</dd>
        </dl>
    </a>
    <a href="#" class="dh">
        <dl>
            <dt><img src="/static/img/gt2.png"/></dt>
            <dd>联系<br/>客服</dd>
        </dl>
    </a>
    <a href="mygxin.html">
        <dl>
            <dt><img src="/static/img/gt3.png"/></dt>
            <dd>个人<br/>中心</dd>
        </dl>
    </a>
    <a href="#" class="toptop" style="display: none">
        <dl>
            <dt><img src="/static/img/gt4.png"/></dt>
            <dd>返回<br/>顶部</dd>
        </dl>
    </a>
    <p>400-800-8200</p>
</div>
<!--footer-->
<div class="footer">
    <div class="top">
        <div class="wrapper">
            <div class="clearfix">
                <a href="#2" class="fl"><img src="/static/img/foot1.png"/></a>
                <span class="fl">7天无理由退货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="/static/img/foot2.png"/></a>
                <span class="fl">15天免费换货</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="/static/img/foot3.png"/></a>
                <span class="fl">满599包邮</span>
            </div>
            <div class="clearfix">
                <a href="#2" class="fl"><img src="/static/img/foot4.png"/></a>
                <span class="fl">手机特色服务</span>
            </div>
        </div>
    </div>
    <p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
        违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
</div>
<script src="/static/js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/public.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/js/user.js" type="text/javascript" charset="utf-8"></script>

<script src="https://kit.fontawesome.com/6dd4ae9b47.js" crossorigin="anonymous"></script>
<script src="/static/js/upload.js"></script>

<script>
    function updateInfo() {
        var id = $("#userId").val();
        var name = $("#name").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var sex = $('input[name="sex"]:checked').val();


        if (name == "" || phone == "" || email == "" || sex == "") {
            alert("请完善信息！！");
            return false;
        }

        $.ajax({
            url: "/shop/updateInfo",
            type: "POST",
            data: {
                id: id,
                name: name,
                phone: phone,
                email: email,
                sex: sex
            },
            success: function (response) {
                if (response == "ok") {
                    alert("修改成功！！");
                    location.reload();
                }
            }
        })
    }

    $("#btn-submit").click(function () {
        if (file == null) {
            alert("请选择上传的图片！！");
        } else {
            var formData = new FormData();
            formData.append("file", file);
            // console.log(formData);
            formData.append("id", $("#userId").val());
            $.ajax({
                url: "/shop/uploadPhoto",
                data: formData,
                contentType: false,
                processData: false,
                type: "POST",
                success: function (data) {
                    if (data == "ok") {
                        alert("修改成功！");
                        location.reload();
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            });
        }
    });
</script>
</body>
</html>
